// 获取课程名字及成绩的输入
let subjectIn = document.querySelector('#subjectIn');
let scoreIn = document.querySelector('#scoreIn');
// 获取新增按钮的元素对象
let addBtn = document.querySelector('#add');
// 获取表格体元素对象
let tbody = document.querySelector('tbody');
// 获取总得分区域列单元格
let totalScore = document.querySelector('tfoot td:last-child');
// 获取重置数据的按钮
let resetBtn = document.querySelector('#reset');

// 定义一个数组，用于存储课程成绩数据
let subjectList = [];

// 给页面绑定事件，当页面一加载完毕之后，
// 拿到浏览器localStorage中存储的数据，然后初始化该表格
// 页面加载完毕的事件为 onload
window.onload = function () {
    // 从localStorage中获取数据，获取的应该是一个json格式的对象
    let jsonStr = localStorage.getItem('subjectList');
    // 将从json字符串中解析的对象赋值给subjectList
    subjectList = jsonStr == null ? [] : JSON.parse(jsonStr);
    // 初始化表格
    initTbody();
}

// 页面刷新或页面关闭之前，将页面数据添加到localStorage中
window.onbeforeunload = function () {
    localStorage.setItem('subjectList', JSON.stringify(subjectList));
}

// 给新增按钮绑定事件
/*
JS中的事件指的是 当我们通过鼠标、键盘等工具操作页面元素时，产生的行为影响我们称之为事件；
如 鼠标单击/双击按钮、光标悬浮于某一个区域、键盘输入、光标聚焦、失去焦点；
当某一个行为需要给其设定 操作时，我们称之为绑定事件
*/
addBtn.onclick = function () {
    // 在本方法内编写的代码就是当该按钮被单击时需要执行的代码
    // alert("课程名：" + subjectIn.value + "，课程成绩：" + scoreIn.value)
    // 通过元素对象直接.的内容都是该元素标签内部的属性，在这里获取的就是input标签内的value属性
    let subject = subjectIn.value;
    let score = scoreIn.value;

    subjectList.push({
        // 将课程和成绩信息放入到一个对象中，然后在放入到数组中
        subject: subject,
        score: Number.parseInt(score)
    })

    // 根据数组中的数据，初始化表格
    initTbody();

    // 清空输入框
    subjectIn.value = '';
    scoreIn.value = '';
}

// 给重置数据的按钮绑定点击事件
resetBtn.onclick = function () {
    // 当前是以数据作为驱动，所以直接将数组置空，然后重新初始化表格
    subjectList = [];
    // 刷新页面
    window.location.reload();
}

// 根据数组中的数据，初始化表格体内的内容
function initTbody() {
    // 重置表格体内的数据
    tbody.innerHTML = null;
    // 遍历课程成绩数组中每一门课程的成绩，给其添加到表格体中
    subjectList.forEach((ss) => {
        let trEl = document.createElement('tr');
        let tdEl = document.createElement('td');
        let tdEl2 = document.createElement('td');
        // 绑定数据以及挂载关系
        tdEl.innerText = ss.subject;
        tdEl2.innerText = ss.score;
        // 添加到表格
        trEl.append(tdEl, tdEl2);
        tbody.append(trEl);

        // 给新增的行设置事件
        trEl.onmouseover = () => {
            changeColor(trEl, 'red');
        }
        trEl.onmouseout = () => {
            changeColor(trEl, 'white');
        }
    })

    // 计算总得分
    totalScore.innerText = subjectList.reduce((sum, ss) => ss.score + sum, 0);
}

function changeColor(element, color) {
    element.style.backgroundColor = color;
}